<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title><c:choose><c:when test="${incrConfig.title != null && incrConfig.title != '' }">${incrConfig.title }</c:when><c:otherwise>月月存活动</c:otherwise></c:choose></title>
<script type="text/javascript" src="./js/flexible.js"></script>
<style>
*{
	margin: 0;
	padding: 0;
}
img{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
li{
	list-style: none;
	text-align: left;
	padding-left: 5px;
}
a{
	text-decoration: none;
	color: #FFF;
}
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.fw-wrap {
	flex-wrap: wrap;
}
.jc-space-between {
	justify-content: space-between;
}
.jc-space-around {
	justify-content: space-around;
}
.ai-center {
	align-items: center;
}
.mask{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.6);
	z-index: 8;
	display: none;
}
.wrapper {
	position: absolute;
	left: 0.6rem;
	top: 11.1rem;
	width: 8.8rem;
	min-height: 9.0rem;
	box-sizing: border-box;
}
.items1, .items2, .items3, .items4 {
	width: 4.2133rem;
	height: 4.3733rem; 
	box-sizing: border-box;	
	padding: 0.24rem 0.34667rem;
	text-align: center;
}
.items3, .items4 {
	margin-top: 0.24rem;
}
.pop_up {
	width: 90%;
	position: fixed;
	margin-left: 5%;
	top: 50%;
	z-index: 9;
	border-radius: 8px;
	padding: 0.36rem;
	text-align:center;
	box-sizing: border-box;
	display: none;
	background-color: #fdfcfc;
}
.pop_title {
	color: #b65204;
	font-size: 18px;
	font-weight: bold;
}
.mt-027 {
	margin-top: 0.27rem;
}
</style>
</head>
<body>
<c:choose>
	<c:when test="${incrConfig != null && incrConfig != '' }">
		<div style="position: relative;">
			<img src="${incrConfig.backImg }" />
			<div class="wrapper">
				<div class="flex fw-wrap jc-space-between ">
					<c:forEach items="${incrConfig.incrList }" var="config" varStatus="status">
						<div class="items${status.index + 1 }">
							<div><img src="${config.rateImg }" /></div>
							<div class="mt-027 btn_august_get" defId="${config.defId }"><img src="${incrConfig.btnGetImg }" /></div>
						</div>
					</c:forEach>
				</div>		
			</div>
		</div>
		<div class="mask"></div>
		<div class="pop_up">
			<div class="pop_title">确认领取</div>
			<div style="margin: 0.36rem;"><img id="rateImg" src="http://laicunba.b0.upaiyun.com/lcb/activity/monthly_invest/september025.png" style="width: 50%;" /></div>
			<div class="flex jc-space-around">
				<div class="btn_august_not"><img src="${incrConfig.cancelImg }" style="width: 3.16rem;" /></div>
				<div class="btn_august_sure"><img src="${incrConfig.sureImg }" style="width: 3.16rem;" /></div>
			</div>
		</div>
	</c:when>
	<c:otherwise>
		<div style="text-align: center;">
			<img src="http://laicunba.b0.upaiyun.com/lcb/yemianbucunzai.png" style="width: 90%;" />
		</div>
		<div style="font-size: 20px; text-align: center;">该活动不存在，或已结束...</div>
	</c:otherwise>
</c:choose>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="activity.js"></script>
<script>
$(function(){
	//将弹出框垂直居中
	function popupHeight(selector){
		var popupHeight = $(selector).outerHeight()/2;
		//console.log(popupHeight);
		$(selector).css({
			"marginTop": "-" + popupHeight + "px"
		});
	};
	popupHeight(".pop_up");
	$(".btn_august_get").click(function(){
		$(".mask,.pop_up").show();
	});
	$(".mask, .btn_august_not").click(function(){
// 		$(".mask,.pop_up").hide();
		window.location.reload();
	});
	
	var location = window.location.href.split("?")[0];
	var device = '${param.device}';
	var app_token = '${param.app_token}';
	var incrList = '${incrConfig.incrList }';
	Activity.ready('${param.app_token}', location.substr(location.length-12, 8), "JOIN_INFO", {
		t:new Date()
	}, function(data){
		if(Activity.conditions.joined("001")){
			$(".btn_august_get").click(function() {
				$(".mask, .pop_up").hide();
				$(".pop_up").html("");
				var html = '<div class="pop_title">领取失败</div>' +
							'<div class="mt-027" style="color: #f4636b; font-size: 16px;">抱歉，本月您已领取过</div>' +
							'<div class="mt-027 btn-invest"><img src="${incrConfig.useImg }" style="width: 3.2rem;" /></div>';
				$(".pop_up").html(html);
				$(".mask, .pop_up").fadeIn();
				$(".btn-invest").click(function() {
					window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
				});
			}); 
		} else {
			$(".btn_august_sure").click(function(){
				var defId = $("#rateImg").attr("defid")?$("#rateImg").attr("defid"):"${incrConfig.incrList[0].defId }";
				Activity.join("001",{
					defid : defId
				}, function(jdata){
					if(jdata.code=="SUCCESS"){
						$(".mask, .pop_up").hide();
						$(".pop_up").html("");
// 						incrList = JSON.parse(incrList);
						var index = parseInt(defId.substr(4));
		 				var html = '<div class="pop_title">领取成功</div>' +
									'<div class="mt-027" style="color: #f4636b;font-size: 16px;">恭喜获得' + incrList[index - 1].incrRate + '加息券</div>' +
									'<div class="mt-027" style="color: #b1b1b4;font-size: 14px;">请至“我的-红包”中查看</div>' +
									'<div class="mt-027 btn-invest"><img src="${incrConfig.useImg }" style="width: 3.2rem;" /></div>';
						$(".pop_up").html(html);
						$(".mask, .pop_up").fadeIn();
						$(".btn-invest").click(function() {
							window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
						});
					}else if(jdata.code=="token_error"){
						if(device){
							console.log("app login");
							window.location.href = location + "?device=app&app_view=login";
						} else {
							console.log("h5 login");
							window.location.href = "/h5/login.htm?tab=account&returnUrl=" + location;
						}
					}else if(jdata.code=="HAS_NO_CHANGE"){
						$(".mask, .pop_up").hide();
						$(".pop_up").html("");
						var html = '<div class="pop_title">领取失败</div>' +
									'<div class="mt-027" style="color: #f4636b;font-size: 16px;">抱歉，本月您已领取过</div>' +
									'<div class="mt-027 btn-invest"><img src="${incrConfig.useImg }" style="width: 3.2rem;" /></div>';
						$(".pop_up").html(html);
						$(".mask, .pop_up").fadeIn();
						$(".btn-invest").click(function() {
							window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
						});
					}else if(jdata.code=="ACT_TIME_INVALID"){
						$(".mask, .pop_up").hide();
						$(".pop_up").html("");
						var html = '<div class="pop_title">领取失败</div>' +
									'<div class="mt-027" style="color: #f4636b;font-size: 16px;">抱歉，活动未开始</div>' +
									'<div class="mt-027 btn-invest"><img src="${incrConfig.useImg }" style="width: 3.2rem;" /></div>';
						$(".pop_up").html(html);
						$(".mask, .pop_up").fadeIn();
						$(".btn-invest").click(function() {
							window.location.href = "/h5/financial_zone.htm?tab=zone&app_view=zone";
						});
					} else {
						console.log(JSON.stringify(jdata));
					}
				});
			});
		}
	});
	
	$(".btn_august_get").click(function() {
		$(".mask, .pop_up").hide();
		$("#rateImg").attr("src","");
		$("#rateImg").attr("defid","");
		var defId = $(this).attr("defid");
		var param = {
			t :new Date(),
			app_token:app_token
		};
		$.post("monthly_invest_login_status.htm", param, function(data) {
			if(data.loginStatus == 1) {
				incrList = JSON.parse(incrList);
				var index = parseInt(defId.substr(4));
				$("#rateImg").attr("src", incrList[index - 1].rateImg);
				$("#rateImg").attr("defid", defId);
				$(".mask, .pop_up").fadeIn();
			} else {
// 				var location = window.location.href.split("?")[0];
				if(device) {
					window.location.href = location + "?device=app&app_view=login";
				} else {
					window.location.href = "/h5/login.htm?tab=account&returnUrl=" + location;
				}
			}
		}, "json");
	});
	
});

</script>
</body>
</html>